<template>
    <div class="app-container" @keyup.enter="handleEnterKey">
      <div class="background-container">
        <div ref="sectionsWrapper" class="sections-wrapper" :class="{ 'hover-effect': isHovered }">
          <div class="top-section" :style="{ backgroundImage: `url(${backgroundImage})` }">
            <div class="system-title">
              <h1>重理图书借阅系统</h1>
              <div class="title-underline"></div>
            </div>
          </div>
          <div class="divider-section"></div>
          <div class="bottom-section">
            <div class="signature">web - owner@clodran</div>
          </div>
        </div>
      </div>
      <div class="form-container">
        <el-form 
          ref="loginFormRef"
          :model="loginForm" 
          :rules="rules"
          class="login-form"
          @mouseenter="isHovered = true"
          @mouseleave="isHovered = false"
        >
          <h2 class="login-title">用户登录</h2>
          
          <el-form-item prop="username">
            <el-input 
              v-model="loginForm.username"
              placeholder="请输入账号"
            >
              <template #prefix>
                <el-icon><User /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          
          <el-form-item prop="password">
            <el-input 
              v-model="loginForm.password"
              type="password"
              placeholder="请输入密码"
              show-password
            >
              <template #prefix>
                <el-icon><Lock /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          
          <el-form-item>
            <el-button type="primary" @click="handleLogin" class="login-button">
              登录
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive, onMounted, onUnmounted,getCurrentInstance } from 'vue'
  import { User, Lock } from '@element-plus/icons-vue'
  import backgroundImage from '../assets/images/background1.png'
  import { useRouter } from 'vue-router'
  import { ElMessage } from 'element-plus'
  import { useAllDataStore } from '@/stores/index'
  const { proxy } = getCurrentInstance()
  const store = useAllDataStore()

  // TODO：后面去掉
  const loginForm = reactive({
    username: 'admin',
    password: '123456'
  })
  
  const rules = {
    username: [
      { required: true, message: '请输入账号', trigger: 'blur' },
      { min: 2, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
    ],
    password: [
      { required: true, message: '请输入密码', trigger: 'blur' },
      { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
    ]
  }
  
  const loginFormRef = ref(null)
  
  const router = useRouter()
  
  const handleLogin = async () => {
    if (!loginFormRef.value) return
    await loginFormRef.value.validate(async (valid, fields) => {
      if (valid) {
        try {
          const res = await proxy.$api.login(loginForm)

          store.updateMenuList(res.data.menuList)

          store.state.token = res.data.token
          store.state.username = res.data.username
          store.state.role = res.data.role
          store.state.id = res.data.id

          store.addMenu(router)

          ElMessage.success('登录成功')
          loginFormRef.value.$el.style.setProperty('opacity', '0')
          toAnimation_before()
          await new Promise(resolve => setTimeout(resolve, 500))

          if (res.data.role === 1) {
            router.push('admin/home');
            store.state.tags = [
            {
              name: 'adminHome',
              path: '/admin/home',
              label: '首页',
              icon: 'home',
            },
          ]
          } else if (res.data.role === 0) {
            router.push('user/home');
            store.state.tags = [
            {
              name: 'userHome',
              path: '/user/home',
              label: '首页',
              icon: 'home',
            },
          ]
          }

          toAnimation_after()
          loginFormRef.value.$el.style.setProperty('opacity', '1')
          toAnimation_after()
        } catch (error) {
          console.error('登录失败:', error)
        }
      } else {
        console.log('验证失败', fields)
      }
    })
  }
  
  const calculateDividerAngle = () => {
    const height = window.innerHeight;
    const width = window.innerWidth;
    return Math.atan2((90 - 60), 100) * (180 / Math.PI);
  }
  
  onMounted(() => {
    window.addEventListener('resize', () => {
      document.documentElement.style.setProperty('--divider-angle', calculateDividerAngle());
    });
    document.documentElement.style.setProperty('--divider-angle', calculateDividerAngle());
  });
  
  onUnmounted(() => {
    window.removeEventListener('resize', calculateDividerAngle);
  });
  
  const isHovered = ref(false)

  const sectionsWrapper = ref(null)

  const toAnimation_before = () => {
    sectionsWrapper.value.style.setProperty('transition', '--offset 1s ease')
    sectionsWrapper.value.style.setProperty('--offset', '-1000px')
  }

  const toAnimation_after = () => {
    sectionsWrapper.value.style.setProperty('transition', '--offset 1s ease')
    sectionsWrapper.value.style.setProperty('--offset', '0px')
  }

  const handleEnterKey = () => {
    loginFormRef.value.validate((valid) => {
      if (valid) {
        handleLogin()
      }
    })
  }

  </script>
  
  <style scoped>
  .app-container {
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
    margin: 0;
  }
  
  .background-container {
    position: absolute;
    width: 100vw;
    height: 100%;
    z-index: 0;
    left: 0;
    right: 0;
  }
  
  .sections-wrapper {
    --offset: 0px;
    transition: --offset 0.3s ease;
  }
  
  .sections-wrapper.hover-effect {
    --offset: -5px;
  }
  
  .top-section {
    position: absolute;
    width: 100vw;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    clip-path: polygon(
      0 0, 
      100% 0, 
      100% calc(59.77% + var(--offset)), 
      0 calc(89.77% + var(--offset))
    );
    transition: clip-path 0.5s ease;
  }
  
  .bottom-section {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(230, 240, 255, 0.6);
    clip-path: polygon(
      0 calc(89.8% + var(--offset)), 
      100% calc(59.8% + var(--offset)), 
      100% 100%, 
      0 100%
    );
    transition: clip-path 0.5s ease;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }
  
  .form-container {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    z-index: 1;
    pointer-events: none;
  }
  
  .login-form {
    position: relative;
    width: 26vw;
    min-width: 300px;
    padding: 2.5vw;
    background: rgba(240, 248, 255, 0.95);
    border-radius: 1.5vw;
    border: none;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1),
                0 5px 15px rgba(135, 206, 235, 0.2);
    margin: 0 8vw 5vh 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
    pointer-events: auto;
  }
  
  .login-form:hover {
    transform: translateY(-0.5vw) scale(1.02);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15),
                0 8px 20px rgba(135, 206, 235, 0.3);
  }
  
  .login-title {
    text-align: center;
    margin-bottom: 30px;
    color: #4682B4;
    font-size: 2.4em;
    font-weight: bold;
    letter-spacing: 3px;
    text-shadow: 0 2px 4px rgba(70, 130, 180, 0.2);
  }
  
  .login-button {
    width: 100%;
    height: 44px;
    font-size: 1.2em;
    font-weight: 500;
    letter-spacing: 2px;
    border-radius: 22px;
    background: linear-gradient(45deg, #4682B4, #87CEEB);
    border: none;
    transition: all 0.3s ease;
    margin-top: 20px;
  }
  
  .login-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(135, 206, 235, 0.4);
    background: linear-gradient(45deg, #5693C5, #98DFF9);
  }
  
  .login-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(135, 206, 235, 0.3);
  }
  
  :deep(.el-input__wrapper) {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(135, 206, 235, 0.3);
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
  }
  
  :deep(.el-input__wrapper:hover) {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(135, 206, 235, 0.6);
    box-shadow: 0 4px 12px rgba(135, 206, 235, 0.15) !important;
  }
  
  :deep(.el-input__wrapper.is-focus) {
    background: #ffffff;
    border-color: #4682B4;
    box-shadow: 0 0 0 2px rgba(70, 130, 180, 0.2) !important;
  }
  
  :deep(.el-input__inner) {
    height: 44px;
    font-size: 1.1em !important;
    color: #2c3e50;
  }
  
  :deep(.el-input__prefix) {
    margin-right: 10px;
    color: #4682B4;
  }
  
  .divider-section {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #a8c6ff;
    clip-path: polygon(
      0 calc(89.1% + var(--offset)),
      100% calc(59.1% + var(--offset)),
      100% calc(59.8% + var(--offset)),
      0 calc(89.8% + var(--offset))
    );
    z-index: 2;
    transition: clip-path 0.3s ease;
  }
  
  @media (max-width: 768px) {
    .divider-section {
      --divider-angle: 15;
    }
  }
  
  @media (min-width: 769px) {
    .divider-section {
      --divider-angle: 18;
    }
  }
  
  .system-title {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 2;
  }

  .system-title h1 {
    color:rgb(255, 255, 255);
    font-size: 3.5em;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3),
                 0 0 20px rgba(135, 206, 235, 0.5);
    margin: 0;
    padding: 0;
    letter-spacing: 4px;
    animation: titleFadeIn 1.5s ease-out;
  }

  .title-underline {
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #ffffff, transparent);
    margin: 10px auto;
    animation: underlineExpand 1.5s ease-out forwards;
  }

  @keyframes titleFadeIn {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes underlineExpand {
    from {
      width: 0;
    }
    to {
      width: 100%;
    }
  }

  .signature {
    position: absolute;
    left: 40px;
    bottom: 30px;
    color: #121111;
    font-size: 1.1em;
    letter-spacing: 1.5px;
    z-index: 2;
    opacity: 0.9;
    transition: all 0.3s ease;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }
  
  .signature:hover {
    opacity: 1;
    transform: translateY(-2px);
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  }
  </style>
  
  <style>
  body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
  }
  </style>
  